<template>
	<view>
		<view class="text-center" style="font-size: 20px">
			{{access_name}}
		</view>

		<view v-if="!is_active" class="padding text-center text-bold">
			抱歉！本出入点已关闭。
		</view>
		<view v-else-if="Object.keys(schema).length" class="list">
			<!-- json schema -->
			<json-editor ref="JsonEditor" :schema="schema" v-model="model">
				<el-button @click="submitAccess">提交登记</el-button>
				<el-button @click="resetAccess">重置填写</el-button>
			</json-editor>
		</view>
	</view>
</template>

<script>
	// import vue-json-ui-editor
	import JsonEditor from 'vue-json-ui-editor';
	import JsonSchema from "@/common/json-schema/json-schema.vue";

	export default {
		components: {
			JsonEditor,
			JsonSchema
		},
		data() {
			return {
				access_id: '',
				access_name: "",
				is_active: true,
				lock: 0,

				schema: {},
				model: {}
			}
		},
		onLoad() {
			this.access_id = this.$route.query.access_id;
			if (this.$route.query.lock) {
				this.lock = this.$route.query.lock;
			}

			if (this.access_id) {
				this.getOneAccess();
			} else {
				uni.showToast({
					icon: 'none',
					title: '出错了，请确认页面来源！',
					duration: 1000
				});
			}
		},
		methods: {
			getOneAccess() {
				// 获得出入点信息
				uniCloud.callFunction({
					name: "ha_get_access",
					data: {
						type: 2,
						access_id: this.access_id
					},
					success: ({result}) => {
						// console.log(result)
						if ( result.status === 0 ) {
							// console.log(result.data)
							const {
								name,
								is_active,
								content
							} = result.data;
							this.access_name = name;
							this.is_active = is_active;
							this.schema = content;
						} else {
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			submitAccess: function(_e) {
				// console.log(_e);
				this.$refs.JsonEditor.form().validate(valid => {
					if (valid) {
						// this.model contains the valid data according your JSON Schema.
						// You can submit your model to the server here

						if (this.lock === 0) {
						} else {
							uni.showToast({
								title: '请不要重复提交！',
								icon: 'none'
							});
							return;
						}

						uniCloud.callFunction({
							name: "ha_add_access_record",
							data: {
								access_id: this.access_id,
								model: this.model
							},
							success: ({result}) => {
								// console.log(result);
								if ( result.status === 0 ) {
									uni.showToast({
										title: `${result.msg || "提交成功！"}`,
										duration: 1000
									});
									setTimeout(() => {
										location.replace(location.href + "&lock=1");
									}, 1000);
								} else {
									uni.showToast({
										icon: 'none',
										title: `${result.msg || "网络异常，请稍后重试！"}`,
										duration: 1000
									});
								}
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '网络异常，请稍后重试！'
								});
							}
						});

						// eslint-disable-next-line no-console
						// console.log('model', JSON.stringify(this.model));
						this.$refs.JsonEditor.clearErrorMessage();
					} else {
						this.$refs.JsonEditor.setErrorMessage('Please fill out the required fields');
						return false;
					}
				});
			},
			resetAccess: function() {
				this.$refs.JsonEditor.reset();
			}
		}
	}
</script>

<style>

</style>
